<template>
    <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
            <div class="title">
               <span>新增菜单</span>
            </div>
            <div>
                <el-button type="info" @click="refresh" icon="el-icon-refresh-right">重置</el-button>
            </div>
        </div>
        <div class="text item">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="菜单标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="菜单英文">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标">
                    <el-input v-model="form.icon" placeholder="选填"></el-input>
                </el-form-item>
                <el-form-item label="菜单级别">
                    <el-radio-group v-model="form.grade" @input="radioInput">
                        <el-radio label="父菜单" border></el-radio>
                        <el-radio label="子菜单" border></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="父菜单ID" v-show="form.grade == '子菜单'">
                    <el-select v-model="form.parentId" placeholder="请选择父菜单">
                        <el-option :label="item.title" :value="item.id" v-for="item, index in parentMenu"
                            :key="'parent' + index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="隐藏">
                    <el-switch v-model="switchValue" @change="changeSwith"></el-switch>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="form.sort" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'add-menu',
    data() {
        return {
            form: {
                title: '',
                grade: '',
                parentId: '',
                hidden: 0,
                sort: 0,
                icon: '',
                name: "",
            },
            // 隐藏按钮值
            switchValue: false,
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 获取父级菜单
        async init() {
            let res = await this.$store.dispatch('getParentMenu')
            if (!res.success) this.$myfun.resError(res)
        },
        // 提交
        async onSubmit() {
            let res = await this.$store.dispatch('addMenu', this.form)
            if(res.success) this.$message.success(res.message)
            else this.$myfun.resError(res)
        },
        // 重置
        refresh(){
            this.form.title = ''
            this.form.grade = ''
            this.form.hidden = 0
            this.form.sort = 0
            this.form.icon = ''
            this.parentId = ""
            this.form.name = ""
        },
        // 父子菜单切换变化
        radioInput(value){
            if(value == "父菜单") this.form.parentId = 0
            else this.form.parentId = ""
        },
        // 切换隐藏按钮值
        changeSwith(value){
            if(value) this.form.hidden = 1
            else this.form.hidden = 0
        }

    },
    computed: {
        parentMenu() {
            return this.$store.state.menu.parentMenu
        }
    }
}
</script>

<style scoped>
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title{
    font-size: 1.1rem;
    font-weight: 550;
}
</style>